<script setup>
import { ref } from 'vue';
import MenuTree from './menuTree.vue';
const menuList = ref([
    {
        index: '1',
        icon: 'el-icon-menu',
        name: '一级菜单01',
        children: [
            {
              index: '1-1',
              icon: 'el-icon-film',
              name: '二级菜单01',
              children: [
                {
                  index: '1-1-1',
                  icon: 'el-icon-date',
                  name: '三级菜单01',
                  children: [
                    {
                      index: '1-1-1-1',
                      icon: 'el-icon-monitor',
                      name: '四级菜单01'
                    }
                  ]
                },
                {
                  index: '1-1-2',
                  icon: 'el-icon-headset',
                  name: '三级菜单02'
                }
              ]
            },
            {
              index: '1-2',
              icon: 'el-icon-data-line',
              name: '二级菜单02'
            }
          ]
        },
        {
          index: '2',
          icon: 'el-icon-s-data',
          name: '一级菜单02'
        },
        {
          index: '3',
          icon: 'el-icon-s-operation',
          name: '一级菜单03'
        },
        {
          index: '4',
          icon: 'el-icon-user',
          name: '一级菜单04'
        }
]);

</script>
<template>
    <div class="container">
        <el-container>
            <el-container class="container-body">
                <!--动态展示菜单-->
                <el-aside class="menu-container">
                    <el-menu default-active="1-1-1-1"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     >
                     <!--引入组件，循环展示菜单，使用递归展示多层级菜单-->
                     <menu-tree :menuData="menuList"></menu-tree>
                    </el-menu>
                </el-aside>
                <el-main class="main-container">Main</el-main>
            </el-container>
        </el-container>
    </div>

</template>
<style lang="scss" scoped>
.container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        min-height: 2%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .container-body{
        background-color: antiquewhite;
    }
    .menu-container{
        left: 20dvh;
    }
}


</style>